<template>
  <fieldset>
    <legend>购物车</legend>
    <ul>
      <li v-for="item in cartData" :key="item.id">
        <b>产品名字:{{ item.title }}</b>
        ------
        <b>价格:{{ item.price }}</b>
        ------
        <b>数量:{{ item.count }}&nbsp;&nbsp;</b>
        ------
        <button @click="jian(item)" :disabled="item.count === 0">-</button>
      </li>
    </ul>
    <h1>总价:{{ total }}</h1>
  </fieldset>
</template>
<script>
import { mapActions, mapGetters, mapState } from "vuex";

export default {
  computed: {
    ...mapState("carts", ["cartData"]),
    ...mapGetters("carts", ["total"]),
  },
  methods: {
    ...mapActions("carts", ["CCC"]),
    jian(item) {
      item.count--;
      this.CCC(item);
    },
  },
  mounted() {},
};
</script>
